<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box div:nth-of-type(1) {
        color: #f00;
      }
    </style>
  </head>
  <body>
    <!-- box盒子里面有3个孩子 但是孩子并不同一类标签 有两个孩子的标签是 div 有一个孩子的标签是 h2 
    如果父盒子里面的子元素 是同一类标签我们可以使用 :nth-child 这个结构伪类选择器
    但是如果 如果父盒子里面的子元素  不是同一类标签我们可以使用 :nth-of-type 这个结构伪类选择器
    
    -->
    <div class="box">
      <h2>第一个孩子</h2>
      <div>第二个孩子</div>
      <div>第三个孩子</div>
    </div>
  </body>
</html>
